import React, { Component } from 'react';
import {StyleSheet, Text, ActivityIndicator, Animated, Easing} from 'react-native';
import screen from '../../utils/screen';
import _ from 'lodash'
import Images from '../../images/images';

export default class Loading extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            boxWidth: screen.width,
            boxHeight: screen.height,
            zIndex: new Animated.Value(-99),
            maskOpacity: new Animated.Value(0),
            boxOpacity: new Animated.Value(0), // 透明度初始值
            boxBounce: new Animated.Value(0.7), // 大小初始值
            loadingRotate:new Animated.Value(0)
        };

        this.showLoading = this.showLoading.bind(this);
        this.hideLoading = this.hideLoading.bind(this);
        this.startAnimate = this.startAnimate.bind(this);
    }

    componentDidMount() {
        const animationLoading = Animated.timing(
            this.state.loadingRotate, {
                toValue:360,
                duration:1000,
                easing:Easing.linear,
                useNativeDriver:true
            }
        )
        Animated.loop(animationLoading).start();
        // setTimeout(Animated.loop())
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (_.isEqual(this.props, nextProps) && _.isEqual(this.state, nextState)) {
            return false;
        }
        return true;
    }
    showLoading(text = '请稍等', hasMask = true) {
        this.state.zIndex.setValue(99);

        this._animateHandler = Animated.parallel([
            Animated.timing(this.state.boxOpacity, {
                toValue: 1,
                duration: 150,
                useNativeDriver: true
            }),
            Animated.spring(this.state.boxBounce, {
                toValue: 1,
                duration: 100,
                useNativeDriver: true
            }),
            hasMask &&
            Animated.timing(this.state.maskOpacity, {
                toValue: 1,
                duration: 200,
                useNativeDriver: true
            })
        ]);

        this.setState(
            {
                text: text,
                boxWidth: screen.width,
                boxHeight: screen.height
            },
            this.startAnimate
        );
    }

    hideLoading() {
        this._animateHandler = Animated.parallel([
            Animated.spring(this.state.boxBounce, {
                toValue: 0.8,
                duration: 100,
                useNativeDriver: true
            }),
            Animated.timing(this.state.boxOpacity, {
                toValue: 0,
                duration: 300,
                useNativeDriver: true
            }),
            Animated.timing(this.state.maskOpacity, {
                toValue: 0,
                duration: 100,
                delay: 50,
                useNativeDriver: true
            }),
            Animated.timing(this.state.zIndex, {
                toValue: -99,
                useNativeDriver:true
            })
        ]);

        // console.log('hide:',this.state);
        this.startAnimate(({ finished }) => {
            finished &&
            this.setState({
                text: null
            });
        });
    }

    startAnimate(cb) {
        // console.log('startAnimate:',this.state);
        this._animateHandler.start(cb);
    }

    render() {
        return (
            <Animated.View
                style={[
                    styles.container,
                    { zIndex: this.state.zIndex, width: this.state.boxWidth, height: this.state.boxHeight },
                    this.props.style
                ]}
            >
                <Animated.View style={[styles.mask, { opacity: this.state.maskOpacity }]} />
                <Animated.View
                    style={[
                        styles.box,
                        {
                            opacity: this.state.boxOpacity,
                            transform: [{ scale: this.state.boxBounce }]
                        }
                    ]}
                >
                    {/*<ActivityIndicator animating={true} style={[styles.icon]} size="small" color="#ffffff" />*/}
                    <Animated.Image source={Images.loading1} style={{ width:screen.PIXEL_60,height:screen.PIXEL_60,
                        transform:[{
                            rotate:this.state.loadingRotate.interpolate({
                                inputRange:[0,360],
                                outputRange:['0deg','360deg']
                            })
                        }]
                    }}/>
                    <Text style={styles.text}>{this.state.text}</Text>
                </Animated.View>
            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        alignItems: 'center',
        justifyContent: 'center'
    },
    mask: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        backgroundColor: 'rgba(0,0,0,0.3)'
    },
    box: {
        width:screen.PIXEL_240, height:screen.PIXEL_240,
        justifyContent:'center',alignItems:'center',
        // paddingTop: 15,
        // paddingLeft: 20,
        // paddingRight: 20,
        // paddingBottom: 15,
        alignSelf: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderRadius: 4,
        zIndex: 9
    },
    icon: {
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 10
    },
    text: {
        fontSize: 13,
        textAlign: 'center',
        color: '#fff',
        marginTop:screen.PIXEL_20
    }
});

/**
 * 用法
 import {loadingRef} from 'xxx/app';
 loadingRef.showLoading('xxx');
 */
